<template>
  <div class="news">
    <!-- <h2>新闻组件</h2>
    <ul>
      <li v-for="(arr, index) in arrs" :key="index">
        <a href="">列表{{ arr }}--{{ index }}</a>
      </li>
    </ul>
    <ul>
      <li v-for="list in lists" :key="list.id">{{ list.title }}</li>
    </ul> -->
    <Child />
    <h2>新闻组件</h2>
    <ul>
      <li v-for="(arr, index) in arrs" :key="index">
        <a href="#javascript">列表{{ arr }}--{{ index }}</a>
      </li>
    </ul>
    <ul>
      <li v-for="list in lists" :key="list.id">{{ list.title }}</li>
    </ul>
  </div>
</template>


<script>
import Child from "../views/Child.vue";
export default {
  data() {
    return {
      arrs: [1, 2, 3, 4],
      lists: [
        { id: 1, title: "目录1" },
        { id: 2, title: "目录2" },
        { id: 3, title: "目录3" },
      ],
    };
  },
  components: {
    Child,
  },
};
</script>

<style lang='less'>
@red: red;
.news {
  ul {
    li {
      a {
        color: @red;
      }
    }
  }
  h2 {
    font-size: 50px;
    color: pink;
  }
}
</style>